<template>
<div class="table-edit-container">
    <div class="table-edit-body">
        <a-form-model :model="form" :labelCol="{span:9}" :wrapperCol="{span:15}">
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.rows','表格行数')" >
                        <a-input-number id="inputNumber" v-model="form.row" :min="1" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.cols','表格列数')" >
                        <a-input-number v-model="form.col" :min="1"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.showHeader','是否显示表头')" >
                        <a-checkbox :checked="form.isTitle" @change="handleCheckBox"></a-checkbox>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.color','表格颜色')" >
                        <a-radio-group v-model="form.color">
                            <a-radio :value="'default'">{{i18n('list.white','白色')}}</a-radio>
                            <a-radio :value="'blue'">{{i18n('list.blue','蓝色')}}</a-radio>
                            <a-radio :value="'green'">{{i18n('list.green','绿色')}}</a-radio>
                            <a-radio :value="'grey'">{{i18n('list.grey','灰色')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.oddWidth','奇数列宽')" >
                        <a-input-number v-model="form.odd" @blur="handleBlur" :min="0"  :formatter="value => `${value}%`"  :parser="value => value.replace('%', '')"></a-input-number>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('list.evenWidth','偶数列宽')" >
                        {{form.even}} %
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>

    </div>
    <div class="table-edit-toolbar">
        <a-button @click="handleOk" type="primary">{{$ti18('rxForm.okBtn','确定')}}</a-button>
        <a-button @click="cancel">{{$ti18('rxForm.cancelBtn','取消')}}</a-button>
    </div>
</div>
</template>

<script>
import { Util } from "@lowcode/jpaas-common-lib"
export default {
    name: "tableColEdit",
    props:{
        layerid:{
            type:String
        },
        lydata:{
            type:Object
        },
        destroy:Function
    },
    data(){
        return {
            form:{
                row:1,
                col:4,
                isTitle:false,
                color:'default',
                odd:0,
                even:null
            }
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "tableCol", key);
        },
        cancel(){
            Util.close(this);
        },
        handleOk(){
            Util.close(this, 'ok', this.form);
        },
        handleCheckBox(e){
            this.form.isTitle  = e.target.checked ;
        },
        handleBlur(e){
            let value = parseInt(e.target.value) ;
            if(value){
                this.calcColWidth(value);
            }else {
                this.$set(this.form,'even',null);
            }
        },
        calcColWidth(value){
            let _col = this.form.col ;
            let _colWidth =(100 - Math.ceil(_col / 2) * value) / (_col - Math.ceil(_col / 2));
            this.$set(this.form,'even',_colWidth.toFixed(2) );
        }
    },
    watch:{
        'form.col':function (v,ov){
            if(this.form.odd){
                this.calcColWidth(this.form.odd);
            }
        }
    }
}
</script>

<style scoped>
.table-edit-container{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.table-edit-container .table-edit-body{
    flex: 1;
    padding: 10px;
}
.table-edit-toolbar{
    padding: 6px;
    text-align: center;
    border-top: 1px solid #ddd;
}
.table-edit-toolbar button:first-child{
    margin-right: 10px;
}
</style>